<template>
  <el-popover placement="bottom" :width="300" trigger="hover">
    <template #default>
      <slot></slot>
    </template>
    <template #reference>
      <el-badge :value="value" :max="max" :is-dot="isDot">
        <component :is="`el-icon${toLine(icon)}`"></component>
      </el-badge>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { toLine } from "../../../../utils";

defineProps({
  value: {
    type: Number,
    default: 12,
  },
  max: {
    type: Number,
  },
  icon: {
    type: String,
    default: "Bell",
  },
  isDot: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped></style>
